<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            border: 1px solid red;
        }

        .con .tr,
        .con .tr .numgroup {
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .numgroup .minuse,
        .numgroup .add {
            text-align: center;
            width: 30px;
            cursor: pointer;
        }
    </style>
    <script>
        $(function () {
            // 全选
            $(".checkall").change(function(){
                let check = $(this).prop('checked');
                console.log(check);
                $(".checkitem,.checkall").prop('checked',check)
            });
            $(".checkitem").change(function(){
                if($(".checkitem").length == $('.checkitem:checked').length){
                    $(".checkall").prop('checked',true)
                }else{
                    $(".checkall").prop('checked',false)
                }
            })

            $(".numgroup .minuse").click(function () {
               
                console.log( );
                let num = $(this).next().val();
                if(num > 0){
                    num --;
                }
                $(this).next().val(num)

                let price = $(this).parent().siblings(".price").text().trim().substring(1)
                let res = parseFloat(price) * parseFloat(num)
                $(this).parent().siblings(".totalprice").text("￥"+res.toFixed(2))
                console.log(price);
            })
            $(".numgroup .add").click(function () {
              
                console.log( );
                let num = $(this).prev().val();
                num++;
                $(this).prev().val(num)

                let price = $(this).parent().siblings(".price").text().trim().substring(1)
                let res = parseFloat(price) * parseFloat(num)
                $(this).parent().siblings(".totalprice").text("￥"+res.toFixed(2))
                console.log(price);
            })
            $(".numgroup .num").change(function(){
                let num = $(this).val();

                let price = $(this).parent().siblings(".price").text().trim().substring(1)
                let res = parseFloat(price) * parseFloat(num)
                $(this).parent().siblings(".totalprice").text("￥"+res.toFixed(2))
                console.log(price);
            })
            
        })
    </script>
</head>

<body>
    <div class="con">
        <input type="checkbox" name="checkall" class="checkall" id="">全选
        <div class="tr">
            <div class="checkb">
                <input type="checkbox" name="c1" class="checkitem" id="">
            </div>
            <div class="img">
                <img src="../img/快乐加倍.png" width="200" height="200" alt="">
            </div>
            <div class="price">
                $30.5
            </div>
            <div class="numgroup">
                <div class="minuse">
                    -
                </div>
                <input type="text" class="num" value="1">
                <div class="add">
                    +
                </div>
            </div>
            <div class="totalprice">
                $30.5
            </div>
            <div class="oper">
                <a href="#">删除</a>
            </div>
        </div>

        <div class="tr">
            <div class="checkb">
                <input type="checkbox" name="c1" class="checkitem" id="">
            </div>
            <div class="img">
                <img src="../img/快乐加倍.png" width="200" height="200" alt="">
            </div>
            <div class="price">
                $30.5
            </div>
            <div class="numgroup">
                <div class="minuse">
                    -
                </div>
                <input type="text" class="num" value="1">
                <div class="add">
                    +
                </div>
            </div>
            <div class="totalprice">
                $30.5
            </div>
            <div class="oper">
                <a href="#">删除</a>
            </div>
        </div>

        <div class="tr">
            <div class="checkb">
                <input type="checkbox" name="c1" class="checkitem" id="">
            </div>
            <div class="img">
                <img src="../img/快乐加倍.png" width="200" height="200" alt="">
            </div>
            <div class="price">
                $30.5
            </div>
            <div class="numgroup">
                <div class="minuse">
                    -
                </div>
                <input type="text" class="num" value="1">
                <div class="add">
                    +
                </div>
            </div>
            <div class="totalprice">
                $30.5
            </div>
            <div class="oper">
                <a href="#">删除</a>
            </div>
        </div>
        <input type="checkbox" name="checkall" class="checkall" id="">全选
    </div>

</body>

</html>